<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./../js/react.js"></script>
  <script src="./../js/react-dom.js"></script>
  <script src="./../js/babel.js"></script>
</head>
<body>
  <div id="box"></div>
  <input type="text" id="text">
  <script type="text/babel">
    {
      /**
       * 表达式：
       * js 中表达式是运行之后会返回一个值判断
       * 
       * -变量
       * -算术运算
       * -函数调用
       * -...
       * 
       * 注意 if,for,while这些不是表达式
       * **/

      let fn = () => {
        return (
          <div>
            <span>第一块</span>
            <strong>第二块</strong>  
          </div>
        )
      }
      /**
       * {}输出数据类型
       * -字符串、数字：原样输出
       * -布尔值、空、未定义会被忽略
       * -数组：会渲染
       * -对象：报错
       * **/

      /**
       * 复杂条件渲染
       * **/
      let fn1 = () => {
        if(1>0){
          return (
            <div>复杂条件渲染</div>
          )
        }
      }
      
      /**
       * 列表渲染
       * 1、jsx 不能写循环语句 for、while
       * 2、jsx 中可以接收数组
       * 
       * **/
      let arr = ['a','b','c']
      
      let mapFn = () => {
        return arr.map(item => <p>这是{item}项</p>);
      }

      let obj = {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      }

      let objFn = () => {
        let keys = Object.keys(obj);
        return keys.map((item, index) => <p>这是{index}项：{item}</p>);
      }

      let isShow = true;
      ReactDOM.render(
        <header>
          {fn()}
          {/*<div>注释</div>*/}
          {'hello world'}
          {true}
          {/*{name: '开课吧'} 会报错*/}
          {[1,2,'3']}
          <div>{isShow ? '正确' : '错误'}</div>
          {isShow&&<h1>正确</h1>}
          {fn1()}
          {mapFn()}
          {objFn()}
        </header>,
        document.querySelector('#box')
      )
    }
  </script>
</body>
</html>